$(function () {
    /** 分页组件 **/
    Vue.component('page',{
        props:['all','cur'],
        data:function(){
            return {
                right: 9,
                left: 2
            }
        },
        template:'<a class="icon item" v-if="prev" v-on:click="cur--"> 上一页 </a>'+
                '<a class="item" v-bind:class="{active:cur == 1}" v-show="all == 1 ? false : true"  v-on:click="btn(1)" href="#1">1</a>'+
                '<a class="item" v-for="item in pageAll" v-on:click="btn(item)" href="#{{item}}"' +
                'v-bind:class="{active:cur == item , ellipsis : item == \'...\'}" track-by="$index">{{item}}</a>'+
                '<a class="item" v-bind:class="{active:cur == all}" v-show="all == 1 ? false : true" v-on:click="btn(all)" href="#{{all}}">{{all}}</a>'+
                '<a class="icon item" v-if="next" v-on:click="cur++" > 下一页 </a>',
        computed:{
            pageAll: function(){
                var self = this;
                var page = [];
                if(self.all > 1 && self.all <= 9) {
                    while(self.left <= self.all-1){
                        page.push(self.left);
                        self.left++;
                    }
                }else if(self.all > 9) {
                    self.left = self.cur - 2;     /*左侧初始化*/
                    self.right = self.cur + 2;    /*右侧初始化*/
                    if(self.cur <= 5){           /*左右侧赋值*/
                        self.left = 2;
                        self.right = 7;
                    }else if(self.right >= self.all-1){
                        self.left = self.all - 5;
                        self.right = self.all - 1;
                    }
                    /*左边省略号*/
                    if(self.cur > 5) {
                        page.push("...");
                    }
                    /*循环数组*/
                    while(self.left <= self.right){
                        page.push(self.left);
                        self.left++;
                    }
                    /*右边省略号*/
                    if(self.right < self.all -1) {
                        page.push("...");
                    }
                }
                return page;

            },
            prev:function(){
                if(this.cur == 1){
                    return false;
                }else{
                    return true;
                }
            },
            next:function(){
                if(this.cur == this.all){
                    return false;
                }else{
                    return true;
                }
            },
        },
        methods : {
            btn:function(item){
                if(item != "...") {
                    this.cur = item;
                }
            }
        },
        watch : {
            cur:function(){

            }
        }
    });
    /** 发现模块栏目 **/
    Vue.component('module',{
        props:['module'],
        data : function() {
            return {
                moduleId: ""
            }
        },
        template: '<div class="select">' +
                    '<span class="text">已建栏目:</span>' +
                    '<select v-model="moduleId" class="ui dropdown">' +
                        '<option v-for="item in module" value="{{item.classId}}">{{item.name}}</option>' +
                    '</select>' +
                    '<a href="#" class="content_release">内容发布</a>' +
                    '</div>',
        watch: {
            "moduleId": function() {
                if(this.moduleId != "" ){
                    this.getContent(this.moduleId);
                }
            }
        },
        methods : {
            getContent: function(id) {
                var self = this;
                $.ajax({
                    url: "http://localhost:3000/app/content/get-dynamic-find?classId="+ id + '&pageSize=10',
                    type : 'get',
                    dataType: "json",
                    success: function(result) {
                        if(result.status) {
                            self.$root.moduleContent = result.data;
                            console.log(self.$root.moduleContent);
                        }else {
                            alert(result.error)
                        }
                    }
                });
            }
        }
    });

    /** 模块具体内容 **/
    Vue.component('modulecontent',{
        props: ["module_content"],
        data: function() {
            return {
                all: 1,
                cur: 1
            }
        },
        template: '<div class="app_manager_list">' +
                    '<table class="ui blue  celled table">' +
                        '<thead>' +
                            '<tr>' +
                                '<th width="300px">名称</th>' +
                                '<th>作者/来源</th>'     +
                                '<th width="100px">类型</th>'     +
                                '<th width="100px">样式</th>'     +
                                '<th width="200px">日期</th>' +
                                '<th width="300px">状态</th>' +
                            '</tr>' +
                        '</thead>' +
                        '<tbody>' +
                            '<tr v-for="item in module_content.items">' +
                                '<td>{{item.name}}</td>'+
                                '<td>{{item.source}}</td>' +
                                '<td>内容</td>' +
                                '<td>{{item.style}}</td>' +
                                '<td>{{item.date}}</td>' +
                                '<td>' +
                                '<a class="ui blue button" v-if="typeof item.state == \'undefined\'">发布</a>' +
                                '<a class="ui orange button" v-if="typeof item.state != \'undefined\'">取消</a>' +
                                '<a class="ui red button" v-if="typeof item.state != \'undefined\'">删除</a>' +
                                '<a class="ui brown button" v-if="typeof item.state != \'undefined\'">编辑</a>' +
                                '</td>' +
                            '</tr>' +
                        '</tbody>' +
                        '<tfoot v-show="all > 1">' +
                            '<tr>' +
                                '<th colspan="3">' +
                                    '<div class="ui center floated pagination menu">' +
                                        '<page v-bind:cur="cur" v-bind:all="all"></page>' +
                                    '</div>' +
                                '</th>' +
                            '</tr>' +
                        '</tfoot>' +
                    '</table>' +
                '</div>',
        ready:function() {
            this.all = this.module_content.pageCount;
            this.cur = this.module_content.pageNum;
        }
    });
    new Vue({
        el : "#app_manager",
        data : {
            cur: 1,
            all: 20,
            module:[],
            moduleContent:{}
        },
        ready: function(){
            this.get_model_name();
        },
        methods: {
            get_model_name: function() {
                var self = this;
                $.ajax({
                    url: "http://localhost:3000/app/content/find-model-name" ,
                    type : 'get',
                    dataType: "json",
                    success: function (result) {
                        if(result.status) {
                            self.module = result.data.items;
                        }else {
                            alert(result.error)
                        }
                    }
                });
            }
        }
    })
});

